<template>
	<view class="page-container">
		<uni-nav-bar @clickLeft='clickLeft' left-icon="left" title="Register" statusBar="true" />
		<view class="container">
			<tabs :tabs="tabsList" class="tabs-container" :select="select" @onChange="tabChange" />
			<view v-if="select === 0">
				<e-input isNumber placeholder="Mobile Number" @onInput="(e) => getInputInfo({
						label: 'account',
						value: e
					})" class="form-column ">
					<template #icon>
						<picker @change="selectState" @click="pickerClick" :value="index" :range="array">
							<view class="mobile-icon">
								<image class="img"  src="./../../static/state.png"></image><span>+91</span>
							</view>
						</picker>
					</template>
				</e-input>

				<view style="height: 1px;"></view>

				<e-input isSendMessage :phone="registerInfo.account" placeholder="Verification Code" @onInput="(e) => getInputInfo({
						label: 'verification',
						value: e
					})" class="form-column ">
					<template #icon>
						<image class="img" src="./../../static/Verification.png"></image>
					</template>
				</e-input>
			</view>
			<view v-if="select === 1">
				<e-input placeholder="email" @onInput="(e) => getInputInfo({
					label: 'account',
					value: e
				})" class="form-column ">
					<template #icon>
						<image class="img" src="./../../static/Email.png"></image>
					</template>
				</e-input>
			</view>

			<view style="height: 1px;"></view>

			<e-input ispassword placeholder="Login Password" @onInput="(e) => getInputInfo({
					label: 'password',
					value: e
				})" class="form-column">
				<template #icon>
					<image class="img" src="./../../static/password.png"></image>
				</template>
			</e-input>

			<view style="height: 1px;"></view>

			<e-input ispassword placeholder="Withdraw Password" @onInput="(e) => getInputInfo({
					label: 'againPassword',
					value: e
				})" class="form-column">
				<template #icon>
					<image class="img" src="./../../static/password.png"></image>
				</template>
			</e-input>

			<view style="height: 1px;"></view>

			<e-input placeholder="whatsApp" @onInput="(e) => getInputInfo({
					label: 'app',
					value: e
				})" class="form-column">
				<template #icon>
					<image class="img" src="./../../static/whatsApp.png"></image>
				</template>
			</e-input>

			<view style="height: 1px;"></view>

			<e-input placeholder="invite Code" @onInput="(e) => getInputInfo({
					label: 'code',
					value: e
				})" class="form-column">
				<template #icon>
					<image class="img" src="./../../static/Recommendation.png"></image>
				</template>
			</e-input>

			<button @click="register" class="login-btn">Register</button>
			<uni-view class="policy">
				<uni-text><span>Already have an account?</span></uni-text>
				<uni-text @click="goToLogin" class="login-btn-text"><span>Log in</span></uni-text>
			</uni-view>
			<uni-view class="policy">
				<checkbox-group @change="bindchange">
					<label>
						<checkbox checked="checked" style="transform: scale(0.7);" />
					</label>
					<span class="i">I agree</span>
					<span class="p" @click="look">PRIVACY POLICY</span>
				</checkbox-group>

			</uni-view>

		</view>
	</view>
</template>

<script>
	import tabs from '../../components/tabs/tabs.vue'
	import EInput from '../../components/input/input.vue'
	export default {
		components: {
			tabs,
			EInput
		},
		data() {
			return {
				select: 0,
				index: 0,
				array: ['+91'],
				registerInfo: {
					account: '',
					verification: '',
					password: '',
					againPassword: '',
					app: '',
					code: ''
				},
				checked: true,
				tabsList: [{
					label: 'Phone Register',
					id: 0
				}, {
					label: 'Email Register',
					id: 1
				}]
			}
		},
		onLoad() {

		},
		methods: {
			tabChange({
				id
			}) {
				this.select = id
			},
			pickerClick() {
				const c = document.querySelector('.uni-picker-action.uni-picker-action-cancel')
				if (c) {
					c.innerHTML = 'cancel'
				}
				const co = document.querySelector('.uni-picker-action.uni-picker-action-confirm')
				if (co) {
					co.innerHTML = 'confirm'
				}
			},
			selectState() {
				console.log('+91')
			},
			getInputInfo({
				label,
				value
			}) {
				this.registerInfo[label] = value
				console.log(this.registerInfo.account)
			},
			clickLeft() {
				uni.navigateBack(-1)
			},
			bindchange(bol) {
				this.checked = Boolean(bol.detail.value.length)
			},
			register() {
				if (!this.checked) {
					return this.toast('Please check the PRIVACY POLICY')
				}
				const {
					account,
					verification,
					password,
					againPassword,
					app,
					code
				} = this.registerInfo
				if (this.select === 0 && !account && account !== 0) {
					return this.toast('Please input phone')
				}
				if (this.select === 0 && !verification && verification !== 0) {
					return this.toast('Please input captcha')
				}
				if (this.select === 1 && !account && account !== 0) {
					return this.toast('Please input email')
				}
				if (this.select === 1 && account.indexOf('@') < 0) {
					return this.toast('Please enter the correct email format')
				}
				if (!password && password !== 0) {
					return this.toast('Please input password')
				}
				if (!againPassword && againPassword !== 0) {
					return this.toast('Please input Pay password')
				}
				if (this.select === 0) {
					return this.toast('Invalid verification code')
				}
				// if (againPassword !== password) {
				// 	return this.toast('Please input email')
				// }
				this.toast('The account already exists')
			},
			toast(message) {
				uni.showToast({
					title: message,
					icon: 'none'
				})
			},
			look() {
				uni.navigateTo({
					url: '/pages/policy/policy'
				})
			},
			goToLogin() {
				uni.reLaunch({
					url: '/pages/login/index'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;


		.tabs-container {
			margin-bottom: 24px;
		}

		.form-column {
			margin: 12px 0;
		}

		.remember {
			color: #808088;
			font-size: 14px;
		}

		.login-btn {
			margin-top: 30px;
			background-color: #c7984a;
			color: #362109;
		}

		.mobile-icon {
			display: flex;
			align-items: center;
			font-size: 18px;

			>img {
				margin-right: 5px;
			}
		}

		.img {
			width: 24px;
			height: 24px;
		}

		.policy {
			margin-top: 12px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
			color: #362109 !important;

			.login-btn-text {
				opacity: .7;
				text-decoration: underline;
				margin-left: 5px;
			}

			.i {
				padding-left: 2px;
			}

			.p {
				opacity: .7;
				text-decoration: underline;
				margin-left: 5px;
			}
		}
	}
</style>
